<template>
	<view class="page">
		<template>
			<view class="step-wrapper">
				<view class="title">积分规则</view>
				<view class="sub-title">积分获得方式</view>
				<view>
					<view class="mb-8">每消费<text class="color-primary">1</text>元，奖励<text class="color-primary">{{ settingData.consume }}</text>积分</view>
					<view class="mb-8">首次订阅，奖励<text class="color-primary">{{settingData.firstSubscription}}</text>积分</view>
					<view class="mb-8">每获得<text class="color-primary">1</text>元佣金，奖励<text class="color-primary">{{settingData.distribution}}</text>积分</view>
					<view>转发活动<text class="color-primary">1</text>次，奖励<text class="color-primary">{{settingData.shareActive}}</text>积分，每日<text class="color-primary">{{settingData.shareDailyLimit}}</text>次</view>
				</view>
			</view>
			<view class="step-wrapper">
				<view class="flex item-center justify-between mb-16">
					<view class="title">商城奖品</view>
					<view class="order-text" @click="toOrder">积分订单 ></view>
				</view>
				<view class="title">优惠券</view>
				<view v-for="(item,index) in couponList" class="coupon-item flex justify-between item-center mt-16 px-12 py-14">
					<view class="left flex-col color-primary">
						<view class="fs-20 text-center"><text class="fs-12">¥</text>{{ item.amount }}</view>
						<view class="fs-10 text-center">{{ item.fullAmount == 0 ? `无门槛券` : `满${item.fullAmount}元可用` }}</view>
					</view>
					<view class="right ml-24 flex justify-between item-center">
						<view class="flex-col fs-12 text-color-hint">
							<view class="fs-16 font-bold c3">{{ item.goodsName }}</view>
							<view class="color-secondary-warning">{{ item.requiredPoints }}积分兑换</view>
							<view>共{{item.totalNum}}张，剩{{item.remainNum}}张</view>
							<view>兑换后{{item.dayLimit}}天内有效</view>
						</view>
						<button data-share-type="mall" class="share-btn" @click="toShare">分享</button>
					</view>
				</view>
			</view>
			<view class="step-wrapper">
				<view class="title mb-16">核销商品</view>
				<view v-for="(item,index) in goodsList" :key="index" class="goods-item flex justify-between item-center py-14 pr-12">
					<view class="left">
						<image :src="firstImage(item.goodsImages)"></image>
					</view>
					<view class="right ml-12 flex justify-between item-center">
						<view class="flex-col fs-12 text-color-hint justify-between">
							<view class="fs-14 font-bold c3 mb-2">{{item.goodsName}}</view>
							<view><text class="color-secondary-warning">{{item.requiredPoints}}</text>积分 <text class="text-throughline">¥{{item.amount}}</text></view>
							<view>共计{{item.totalNum}}件，剩余{{item.remainNum}}件</view>
						</view>
						<button data-share-type="mall" class="share-btn flex-shrink" @click="toShare">分享</button>
					</view>
				</view>
			</view>
			<view class="btn-box flex item-center justify-between">
				<template v-if="status === 1">
					<button data-share-type="mall" class="callback-btn" style="width: 44%;" @click="toShare">分享</button>
					<view class="release-btn" style="width: 44%;" @click="toSet">设置</view>
				</template>
				<view v-else class="release-btn" style="width: 100%;" @click="toSet">重启</view>
			</view>
		</template>
		<couponPopup ref="couponDialog" @refresh="getContent" />
		<share-homepage v-if="showSharePopup" :id="userStore.userInfo.businessInfo.id" dataType="mall" :show="showSharePopup" @onClose="showSharePopup=false"></share-homepage>
	</view>
	
</template>

<script setup>
	import {ref, onMounted} from 'vue'
	import {onShow} from '@dcloudio/uni-app';
	import {mathHeight, isVideoFile} from '@/utils/index.js'
	import {saveSettingsApi, myProductListApi, removeProductApi, getSettingsApi, getHomePageApi} from '@/pagesJ/api/index.js'
	import couponPopup from './couponPopup.vue';
	import {useUserStore} from '@/stores/modules/user.js'
	const userStore = useUserStore()
	const scorllH = mathHeight(0)
	const goBack = () => {
		uni.navigateBack()
	}
	const couponDialog = ref(null)
	const settingData = ref({
		consume: 1,
		firstSubscription: 1,
		distribution: 1,
		shareActive: 1,
		shareDailyLimit: 2
	})
	const couponList = ref([])
	const goodsList = ref([])
	const scrollTop = ref(0)
	const status = ref('')
	const topUp = () => {
		uni.pageScrollTo({
		    scrollTop: 0,
		    duration: 300
		  });
	}
	const firstImage = (list) => {
		return list.find(item => !isVideoFile(item))
	}
	const scrollFn = (e) => {
		scrollTop.value = e.detail.scrollTop
	}
	const showSharePopup = ref(false)
	const toShare = () => {
		if (userStore.isLogin) {
			showSharePopup.value = true
		} else {
			uni.navigateTo({
				url: `/pagesA/login/login?from=${encodeURIComponent(`/pagesA/merchant/homepage?id=${userStore.userInfo.businessInfo.id}`)}`,
				events: {
					onLoginSuccess() {
						getHomePage()
					}
				}
			})
		}
	}
	const toSet = () => {
		uni.navigateTo({
			url: `/pagesJ/integralSetting/mall-set`,
		})
	}
	const addGoods = () => {
		uni.navigateTo({
			url: `/pagesJ/integralSetting/add-goods`,
		})
	}
	const toOrder = () => {
		uni.navigateTo({
			url: `/pagesF/order/order`,
		})
	}
	const addCoupon = () => {
		couponDialog.value.showPop(true)
	}
	const editCoupon = (item) => {
		couponDialog.value.showPop(true, item)
	}
	const delProduct = (id) => {
		removeProductApi({id}).then(res => {
			showToast('删除成功')
			getCouponList()
			getGoodsList()
		})
	}
	const editGoods = (id) => {
		uni.navigateTo({
			url: `/pagesJ/integralSetting/add-goods?id=${id}`,
		})
	}
	const getCouponList = () => {
		myProductListApi({productType: 1}).then(res => {
			couponList.value = res
		})
	}
	const getGoodsList = () => {
		myProductListApi({productType: 2}).then(res => {
			goodsList.value = res
		})
	}
	const getSettings = () => {
		getSettingsApi().then(res => {
			settingData.value = Object.assign(settingData.value, res)
		})
	}
	const getHomePage = (id) => {
		getHomePageApi({id}).then(res => {
			status.value = res.pointsMallState
		})
	}
	const getContent = () => {
		getSettings()
		getCouponList()
		getGoodsList()
	}
	const showToast = (title) => {
		uni.showToast({
			title,
			icon: 'none'
		})
	}
	onMounted(() => {
		getContent()
		getHomePage(userStore.userInfo.businessInfo.id)
	})
	defineExpose({
		getContent,
		getHomePage
	})
	
</script>
<style lang="scss" scoped>
	.page {
		position: relative;
		width: 100vw;
		min-height: 100vh;
		background-color: #F5F5F5;
		padding-bottom: 90px;
	}

	.apply-top {
		background: #FA4543;
		padding: 0 0 60px;
	}
	
	.bg-wrapper{
		z-index: 0;
		position: absolute;
		right: 0;
		top: 60px;
		image{
			width: 178px;
			height: 188px;
		}
	}
	
	.content-wrapper{
		position: relative;
		z-index: 1;
		margin: 20px 10px 0;
	}

	.join-title {
		font-weight: bold;
		font-size: 24px;
		color: #FFFFFF;
	}
	.step-wrapper{
		background: #fff;
		border-radius: 12px;
		margin: 0 10px 16px;
		padding: 16px 12px;
		.title{
			font-weight: 600;
			font-size: 20px;
			color: #333333;
		}
		.order-text{
			font-size: 12px;
			color: rgba(51,51,51,0.6);
		}
		.sub-title{
			font-weight: 600;
			font-size: 14px;
			color: #333333;
			margin: 16px 0 8px;
		}
		.label-box {
			font-size: 14px;
			font-weight: 600;
			line-height: 20px;
			color: #333333;
		}
		.inp-box {
			width: 77px;
			background: #F5F5F5;
			height: 32px;
			border-radius: 8px 8px 8px 8px;
			padding: 0 10px;
			line-height: 32px;
		}
		.coupon-item{
			background-image: url("https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/bg-coupon.png");
			background-repeat: no-repeat;
			background-size: 100%;
			.left{
				width: 68px;
			}
			.right{
				width: 240px;
				.coupon-btn{
					color: #818181;
					font-size: 10px;
					border: 1px solid rgba(51,51,51,0.6);
					border-radius: 4px;
					padding: 2px 12px;
				}
			}
		}
		.goods-item{
			.left{
				position: relative;
				image{
					width: 78px;
					height: 78px;
					border-radius: 12px;
				}
				.stock{
					position: absolute;
					bottom: 0;
					border-radius: 0px 0px 12px 12px;
					background: rgba(51,51,51,0.6);
					width: 100%;
					text-align: center;
					padding: 2px;
					font-size: 12px;
					color: #fff;
				}
			}
			.right{
				width: 240px;
				.coupon-btn{
					color: #818181;
					font-size: 10px;
					border: 1px solid rgba(51,51,51,0.6);
					border-radius: 4px;
					padding: 2px 12px;
				}
			}
		}
	}
	.btn-box {
		position: fixed;
		bottom: 0px;
		left: 0;
		width: 100%;
		z-index: 7;
		padding: 10px 0;
	}
	.release-btn {
		height: 46px;
		padding: 12px, 20px, 12px, 20px;
		border-radius: 8px;
		background: #FA4543;
		color: #ffffff;
		margin: 10px;
		text-align: center;
		line-height: 46px;
	}
	.callback-btn{
		height: 46px;
		padding: 12px, 20px, 12px, 20px;
		border-radius: 8px;
		background: #F5F5F5;
		color: rgba(51,51,51,0.6);
		border: 1px solid rgba(51,51,51,0.6);
		margin: 10px;
		text-align: center;
		line-height: 46px;
		&.inner-btn{
			margin: 16px 0 0 0;
		}
	}
	.share-btn{
		line-height: 22px;
		height: 22px;
		font-size: 12px;
		border-radius: 4px;
		background: #FA4543;
		color: #ffffff;
		margin-right: 8px;
		text-align: center;
	}
</style>